<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close" destroy-on-close>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="1"></el-tab-pane>
      <el-tab-pane label="区域范围" name="2"></el-tab-pane>
    </el-tabs>
    <el-form v-show="activeName==1" ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="部门名称" prop="name"><el-input v-model="form.name" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="部门别名" prop="alias"><el-input v-model="form.alias" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="部门领导" prop="leader">
        <SelectByApi v-model="form.leader" :label.sync="form.leaderName" placeholder="请选择部门领导" :api="memberList" :params="{ groupPath: form.path, pageSize: 999 }" labelFiled="name" valueFiled="id"></SelectByApi>
      </el-form-item>
      <el-form-item label="排序" prop="sort"><el-input v-model="form.sort" type="number" placeholder="请输入"></el-input></el-form-item>
      <el-form-item label="是否叶子节点" prop="leaf"><el-switch v-model="form.leaf" :active-value="1" :inactive-value="0"></el-switch></el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="200" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="自定义字段" prop="ext">
        <EditField ref="editExtra" v-model="form.ext"></EditField>
      </el-form-item>
    </el-form>
    <div v-if="activeName == 2">
      <div style="display:flex;margin-bottom: 10px;">
        <el-input v-model="form.area" type="textarea" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="200" show-word-limit></el-input>
        <el-button type="primary" style="margin-left:10px;" @click="onClickEdit('polygon')">{{ currentType == 'polygon' ? '提取' : '编辑' }}</el-button>
      </div>
      <EditMap ref="editMap" style="width: 100%;height: 500px;"></EditMap>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import EditField from "./editField.vue";
import EditMap from "@/components/EditMap";
import { groupAdd, groupEdit, memberList } from "@/api/user";
export default {
  components: { EditField, EditMap },
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: null,
    },
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {};
        if(val.id && val.area) {
            setTimeout(_=>{
                this.$refs.editMap && this.onClickEdit('polygon')
            },1000)
        }
      },
      immediate: true,
    },
    show: {
      handler(val) {
        if(val) {
            this.activeName = '1'
            this.resetForm("form");
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      activeName: "1",
      currentType: null,
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["change", "input"],
          },
        ],
        alias: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["change", "input"],
          },
        ],
      },
    };
  },
  methods: {
    memberList,
    onClickEdit(type) {
      if (this.currentType && this.currentType == type) {
        // 提取
        if (type == "polygon") {
          this.form.area = this.$refs.editMap.saveWithType(type);
        }
        this.currentType = null;
      } else if (!this.currentType) {
        this.currentType = type;
        // 编辑
        if (type == "polygon") {
          this.$refs.editMap.editWithType(type, this.form.area);
        }
      }
    },
    handleClick() {
        // if(this.activeName == 2) {
        //     this.$nextTick(_=>{
        //         this.onClickEdit('polygon')
        //     })
        // }
    },
    submit() {
      if (this.currentType) {
        this.$modal.msgWarning("有编辑中的坐标未提取");
        return;
      }

      this.$refs.editExtra.save();
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            groupEdit(this.form).then((res) => {
              // 验证成功-新增或者编辑
              this.$emit("change", this.form);
              this.close();
            });
          } else {
            groupAdd(this.form).then((res) => {
              // 验证成功-新增或者编辑
              this.$emit("change", this.form);
              this.close();
            });
          }
        }
      });
    },
    close() {
      this.form = {};
      this.$emit("update:show", false);
    },
  },
};
</script>
